<template>
  <div>
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          type="index"
          label="id"
          width="120">
      </el-table-column>
      <el-table-column
          prop="name"
          label="类型名称"
          width="120">
        <template slot-scope="scope">{{ scope.row.typeName }}</template>
      </el-table-column>
    </el-table>
  </div>
    <!--表单部分-->


</template>

<script>
import Message from "@/utils/message";
import {getProductTypeList} from "@/API/TypeAPI";

export default {
  name: 'ProductManager',
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      formLabelWidth: '120px',
    }
  },
  async mounted() {
    // Message.success(this, "菜品类型加载成功。");
    await this.loadTable();
  },
  methods: {
    // 加载表格
    async loadTable() {
      let result = await getProductTypeList();
      if (result.code === 1) {
        this.tableData = result.data;
      } else {
        Message.error(this, "菜品类型加载失败。");
      }
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>